import PopoverSelect from "@/components/_PopoverSelect";
import IconMap from "@/components/IconMap";
import { Button, DatePicker, Form, Input, Select } from "antd";
import dayjs from "dayjs";

const FilterSearch = ({ filterDataSource, raload }: any) => {
  const [form] = Form.useForm();
  function changeHandle() {
    // console.log(value, "value");
    const values = form.getFieldsValue();
    // console.log(values, "values");
    filterDataSource({
      ...values,
      entryTime: values.entryTime
        ? dayjs(values.entryTime).format("YYYY-MM-DD")
        : "",
    });
  }
  return (
    <div className="w-full h-full">
      <div className="flex justify-between items-center">
        <span>字段过滤</span>{" "}
        <Button
          type="text"
          icon={IconMap.ReloadOutlined}
          onClick={() => {
            form.resetFields();
            raload();
          }}
        ></Button>
      </div>
      <div>搜索表单</div>
      <div>
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="搜索姓名">
            <Input
              placeholder="搜索姓名"
              allowClear
              onPressEnter={changeHandle}
            />
          </Form.Item>
          <Form.Item name="department" label="搜索部门">
            <PopoverSelect
              placeholder="搜索部门"
              onChange={(value) => {
                console.log(value, "value");
                changeHandle();
              }}
            />
          </Form.Item>
          <Form.Item name="entryTime" label="搜索入职时间">
            <DatePicker
              placeholder="搜索入职时间"
              allowClear
              className="w-full"
              onChange={changeHandle}
            />
          </Form.Item>
          <Form.Item name="level" label="搜索级别">
            <Select placeholder="搜索级别" allowClear onChange={changeHandle}>
              <Select.Option value="初级">初级</Select.Option>
              <Select.Option value="中级">中级</Select.Option>
              <Select.Option value="高级">高级</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default FilterSearch;
